<template>
  <div class="ProductRetrieval">
    <div class="customer-top">
      <div class="customer-logo" v-show="showLogo">
        <img src="../../../../static/img/productRetrieval.png" alt="">
      </div>
      <div class="popover-card">
        <el-popover
          ref="inputPopover"
          placement="bottom"
          width="610"
          trigger="focus">
          <el-row>
            <el-col :span="24">
              <div class="search-card">
                <div class="search-history">
                  <div class="search-title">
                    <span>{{$t("search.SearchHistory")}}</span>
                    <span class="clear-history">
                     <i class="icon iconfont icon-shanchu"></i>
                     <span class="clearAll" @click="clearAll(1)" style="cursor: pointer">{{$t("search.clearAll")}}</span>
                  </span>
                  </div>
                  <div class="history-tag">
                    <div class="machine-history" v-show="this.searchHistoryB.toString() !== ''">
                      <el-tag closable v-for="(item, index) in searchHistoryB" :key="index" @click.native="jumpHistory(item)"
                              @close.stop="clearTag(item)"  class="tag-item"  style="cursor: pointer"><span>{{item}}</span>
                      </el-tag>
                    </div>
                  </div>
                </div>
                <div class="hot-word"></div>
              </div>
            </el-col>
          </el-row>
        </el-popover>
      </div>
      <div class="new-input">
        <el-row>
          <el-col :span="inputNum" :offset="inputSetNum">
            <el-input id="searchInput" :placeholder="tipsValue" v-model.trim="search_value" style="width: 100%" class="input-with-select" v-popover:inputPopover @keyup.enter.native="search(search_value), searchAction(`butclass:${butValue},keywrod: ${search_value}`)">
              <template slot="prepend">{{$t('filter.Machine')}}</template>
              <i slot="suffix" class="el-input__icon el-icon-close clear-icon" @click="clearValue"></i>
              <el-button slot="append" icon="el-icon-search" @click="search(search_value), searchAction(`butclass:${butValue},keywrod: ${search_value}`)"></el-button>
            </el-input>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--新版本-->
    <!--<div class="machine-list" id="machine-list" v-if="snData.flag === 'sn' && JSON.stringify(snData.rows) !== '{}'" style="margin-left: 3vw; margin-top: 1vh"  v-loading="infoLoading">-->
    <div class="machine-list" id="machine-list" v-if="snData.flag === 'sn' && snData.rows.length !== 0"  v-loading="infoLoading">
      <el-card class="bottom-box">
        <div class="detailsName">
          <!--<span class="title">SN:{{search_value}}</span>-->
          <span class="title">SN:{{stepsData.snNumber}}</span>
          <span class="subTitle">{{stepsData.prod_family}}</span>
        </div>
        <el-row class="progressBox">
          <!--因后两个step无数据，所以不能使用循环-->
          <!--<el-col :span="6"  v-for="(tooltip,index) in $t('DeviceDetails.tooltips')">-->
          <!--<div class="progress">-->
          <!--<div class="tooltip" @click="highLight = index" :class="{active: highLight === index}">-->
          <!--<div class="tooltip-name">{{tooltip.name}}</div>-->
          <!--<div class="tooltip-info">{{tooltip.title}}:{{tooltip.info}}</div>-->
          <!--</div>-->
          <!--<div class="step">-->
          <!--<span class="step-num">{{index + 1}}</span>-->
          <!--<span class="step-line"></span>-->
          <!--</div>-->
          <!--</div>-->
          <!--</el-col>-->
          <el-col :span="6">
            <div class="progress">
              <div class="tooltip" @click="highLight = 0" :class="{active: highLight === 0}">
                <div class="tooltip-name">{{$t('DeviceDetails.steps.step1.name')}}</div>
                <div class="tooltip-info">{{stepsData.tip1.name}}:{{stepsData.tip1.value}}</div>
              </div>
              <div class="step">
                <span class="step-num">1</span>
                <span class="step-line"></span>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="progress">
              <div class="tooltip" @click="highLight = 1" :class="{active: highLight === 1}">
                <div class="tooltip-name">{{$t('DeviceDetails.steps.step2.name')}}</div>
                <div class="tooltip-info">{{stepsData.tip2.name}}:{{stepsData.tip2.value}}</div>
              </div>
              <div class="step">
                <span class="step-num">2</span>
                <span class="step-line"></span>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="progress">
              <div class="tooltip" @click="highLight = 2" :class="{active: highLight === 2}">
                <div class="tooltip-name">{{$t('DeviceDetails.steps.step3.name')}}</div>
                <div class="tooltip-info">{{stepsData.tip3.name}}:{{stepsData.tip3.value}}</div>
              </div>
              <div class="step">
                <span class="step-num">3</span>
                <span class="step-line"></span>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="progress">
              <div class="tooltip" @click="highLight = 3" :class="{active: highLight === 3}">
                <div class="tooltip-name">{{$t('DeviceDetails.steps.step4.name')}}</div>
                <div class="tooltip-info">{{stepsData.tip4.name}}:{{stepsData.tip4.value}}</div>
              </div>
              <div class="step">
                <span class="step-num">4</span>
                <span class="step-line"></span>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="progress">
              <div class="tooltip" @click="highLight = 4" :class="{active: highLight === 4}">
                <div class="tooltip-name">{{$t('DeviceDetails.steps.step5.name')}}</div>
                <div class="tooltip-info">{{stepsData.tip5.name}}:{{stepsData.tip5.value}}</div>
              </div>
              <div class="step">
                <span class="step-num">5</span>
                <span class="step-line"></span>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="progress">
              <div class="tooltip" @click="highLight = 5" :class="{active: highLight === 5}">
                <div class="tooltip-name">{{$t('DeviceDetails.steps.step6.name')}}</div>
                <!--<div class="tooltip-info">{{stepsData.tip6.name}}:{{stepsData.tip6.value}}</div>-->
              </div>
              <div class="step">
                <span class="step-num">6</span>
                <span class="step-line"></span>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="progress">
              <div class="tooltip" @click="highLight = 6" :class="{active: highLight === 6}">
                <div class="tooltip-name">{{$t('DeviceDetails.steps.step7.name')}}</div>
                <div class="tooltip-info">{{stepsData.tip7.name}}:{{stepsData.tip7.value}}</div>
              </div>
              <div class="step">
                <span class="step-num">7</span>
                <span class="step-line"></span>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="progressCards">
          <div class="deviceDetails-list"  v-if="highLight === 0">
            <div class="cardTitle">{{$t('DeviceDetails.steps.step1.name')}}</div>
            <div class="noData" v-if="JSON.stringify(stepsData.row1) == '{}'">No Data</div>
            <el-row class="cardInfo" v-else>
              <el-col :span="12" v-for="(value, key) in stepsData.row1" :key="key">
                <span class="list-index">{{key}}：</span>
                <span class="list-key">{{value}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="deviceDetails-list"  v-if="highLight === 1">
            <div class="cardTitle">{{$t('DeviceDetails.steps.step2.name')}}</div>
            <div class="noData" v-if="JSON.stringify(stepsData.row2) == '{}'">No Data</div>
            <el-row class="cardInfo" v-else>
              <el-col :span="12" v-for="(value, key) in stepsData.row2" :key="key">
                <span class="list-index">{{key}}：</span>
                <span class="list-key">{{value}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="deviceDetails-list"  v-if="highLight === 2">
            <div class="cardTitle">{{$t('DeviceDetails.steps.step3.name')}}</div>
            <div class="noData" v-if="JSON.stringify(stepsData.row3) == '{}'">No Data</div>
            <el-row class="cardInfo" v-else>
              <el-col :span="12" v-for="(value, key) in stepsData.row3" :key="key">
                <span class="list-index">{{key}}：</span>
                <span class="list-key">{{value}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="deviceDetails-list"  v-if="highLight === 3">
            <div class="cardTitle">{{$t('DeviceDetails.steps.step4.name')}}</div>
            <div class="noData" v-if="JSON.stringify(stepsData.row4) == '{}'">No Data</div>
            <el-row class="cardInfo" v-else>
              <el-col :span="12" v-for="(value, key) in stepsData.row4" :key="key">
                <span class="list-index">{{key}}：</span>
                <span class="list-key">{{value}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="deviceDetails-list"  v-if="highLight === 4">
            <div class="cardTitle">{{$t('DeviceDetails.steps.step5.name')}}</div>
            <div class="noData" v-if="JSON.stringify(stepsData.row5) == '{}'">No Data</div>
            <el-row class="cardInfo" v-else>
              <el-col :span="12" v-for="(value, key) in stepsData.row5" :key="key">
                <span class="list-index">{{key}}：</span>
                <span class="list-key">{{value}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="deviceDetails-list"  v-if="highLight === 5">
            <div class="cardTitle">{{$t('DeviceDetails.steps.step6.name')}}</div>
            <div class="noData" v-if="JSON.stringify(stepsData.row6) == '{}'">No Data</div>
            <el-row class="cardInfo" v-else>
              <el-col :span="12" v-for="(value, key) in stepsData.row6" :key="key">
                <span class="list-index">{{key}}：</span>
                <span class="list-key">{{value}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="deviceDetails-list"  v-if="highLight === 6">
            <div class="cardTitle">{{$t('DeviceDetails.steps.step7.name')}}</div>
            <div class="noData" v-if="JSON.stringify(stepsData.row7) == '{}'">No Data</div>
            <el-row class="cardInfo" v-else>
              <el-col :span="12" v-for="(value, key) in stepsData.row7" :key="key">
                <span class="list-index">{{key}}：</span>
                <span class="list-key">{{value}}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>
      <div class="tips" v-if="resStatus === ''">
        <p><img src="../../../../static/img/noData.png" alt=""></p>
      </div>
    </div>
    <div v-else>
      <el-row type="flex" justify="space-between" class="header-title" v-if="resStatus === 200">
        <el-col :span="3">
          <div class="item-name">
            <span>{{$t('filter.Name')}}</span>
          </div>
        </el-col>
        <el-col :span="3" :offset="4">
          <div class="item-account" style="padding-left: 33px;">
            <span>{{$t('filter.Account')}}</span>
          </div>
        </el-col>
        <el-col :span="3" :offset="4">
          <div class="item-machine"  style="padding-left: 37px;">
            <span>{{$t('filter.Machine1')}}</span>
          </div>
        </el-col>
        <el-col :span="4" :offset="3">
          <div class="item-claim"  style="padding-left: 50px;">
            <span>{{$t('filter.MachineinWarranty')}}</span>
          </div>
        </el-col>
      </el-row>
      <div class="customer-info2" id="customer-info2" @scroll="isBottom2" v-if="infoFlag === true"  v-loading="infoLoading" element-loading-text="loading...">
        <!--销售地区-->
        <div v-if="resStatus === 200">
          <machineInfo :items="infoItem" :childFlag="flag" :searchValue="search_value" v-if="showMachine"></machineInfo>
        </div>
        <div class="tips" v-if="resStatus === ''">
          <p><img src="../../../../static/img/noData.png" alt=""></p>
        </div>
      </div>
    </div>
    <div class="load-div"  v-loading="showLoading"></div>
  </div>
</template>

<script>
  import machineInfo from './machineInfo.vue'
  import machineList from './MachineList.vue'
  import { getUsername, getPageId, getPageName, getUrl, setKeyword, setbutValue} from "../../../utils/auth";
  import {mapGetters} from "vuex";

  export default {
    name: 'ProductRetrieval',
    data() {
      return {
        testPort: '',    //  http://10.116.42.5:9090
        highLight: 0,
        stepsData:{
          snNumber: '',
          prod_family: '',
          tip1: {},
          row1: {},
          tip2: {},
          row3: {},
          tip4: {},
          row4: {},
          tip5: {},
          row5: {},
          tip6: {},
          row6: {},
          tip7: {},
          row7: {}
        },
        // 改版后data
        infoFlag: false, // 用来判断是否调用了search也就是是否点击了搜索，以解决组件滚动条问题
        inputSetNum: 4,
        inputNum: 16,
        inputValue: '',
        inputSelOpts: [
          {
            value: 0,
            label: 'Customer'
          },
          {
            value: 1,
            label: 'Machine'
          }
        ],
        // 搜索后的高级搜索按钮变化的样式
        afterCheck: false,
        // selectValue: 'Customer',

        snData: {
          flag: '',
          count: 1,
          rows: [],
          pageNum: 1
        },
        showLoading: false,
        infoLoading: false,
        showHistoryTag: false,
        searchHistoryA: [],
        searchHistoryB: [],
        tipsValue: 'Commercial customer/Channel partner name',
        showMachine: false,
        showBtn: 2,
        butValue: 0,
        search_value: '',
        showLogo: true,
        infoItem: [],
        // flag
        flag: '',
        bpNumber: '',
        accountName: '',
        resStatus: '',
        pageNum: 1
      }
    },
    components: {
      machineInfo,
      machineList,
    },
    computed: {
      ...mapGetters(['language'])
    },
    watch: {
      language(n) {
        const _this = this
        if (n === 'en') {
          this.tipsValue = this.$t('search.Pleaseholdtwo')
        } else if (n === 'zh') {
          this.tipsValue = this.$t('search.Pleaseholdtwo')
        }
      }
    },
    methods: {
      clearTag(item) {
        var _this = this
        this.axios.post('/search/delOneSearchHistory.do', {
          'keyword': item,
          // 'flag': 1
          'flag': 2
        }).then(response => {
//          console.log('清除成功')
//          console.log(response)
          this.searchHistory()
        })
      },
      clearAll(n) {
        var _this = this
        this.axios.post('/search/delMoreSearchHistory.do', {
          // 'flag': 1
          'flag': 2
        }).then(response => {
          this.searchHistory()
        })
      },
      jumpHistory(item) {
        this.search_value = item
        this.search()
      },
      searchHistory() {
        var _this = this
        this.axios.post('/user/get_keyword.do', {
          // 'flag': 1
          'flag': 2
        }).then(response => {
          if (response.status === 200) {
//            console.log('搜索历史')
//            console.log(response)
            let resData = response.data.data
            if (resData.length != 0) {
              _this.showHistoryTag = true
            }
            _this.searchHistoryB = resData
          }
        })
      },
      searchAction(key) {
        var _this = this;
        _this.key = key;
        setKeyword(_this.search_value);
        setbutValue(_this.butValue);
        // console.log(key);
        Avatar.push([
          'track',
          [
            'category',
            'loginSuccess',
            'label',
            {
              url: getUrl(),
              userName: getUsername(),
              pageID: getPageName(),
              childName: _this.key
            },
            0
          ]
        ]);
      },
      open() {
        this.$message({
          message: this.$t('search.Nodata'),
          type: 'warning',
          showClose: true,
          duration: 2000
        });
      },
      clearValue() {
        this.search_value = ''
      },
      switchBtn() {
        this.pageNum = 1;
        this.infoItem = [];
        this.resStatus = '1';
        this.snData.flag = ''
        this.showMachine = true
        this.tipsValue = this.$t('search.Pleaseholdtwo')
        this.searchHistory()
      },
      search() {
        // console.log('哈哈')
        // console.log(document.getElementById('searchInput'))
        document.getElementById('searchInput').blur() // 使其失去焦点，让历史框隐藏
        this.infoLoading = true
        //        this.search_value = this.search_value.toUpperCase()
        this.switchBtn()
//        this.resStatus = ''
        var _this = this
        if (this.search_value !== '') {
          this.axios.post(`${this.testPort}/search/customerArchives.do`, {
            search_value: _this.search_value,
            pageNum: 1,
            pageSize: 10,
            // flag: 1
            flag: 2
          }).then(response => {
            if (response.status === 200) {
              _this.showLogo = false
              this.inputSetNum = 0
              this.inputNum = 18
              _this.afterCheck = true
              _this.infoFlag = true
              var resData = response.data.data
              // console.log('aaa',JSON.stringify(resData.rows) == "{}")
              // _this.resStatus = resData.rows.length === 0 ? '' : response.status
              _this.resStatus = resData.rows.length === 0 ? '' : response.status
              if (resData.flag === 'product') {
                _this.flag = 'product'
              } else if (resData.flag === 'sn') {
                _this.flag = 'sn'
                _this.snData = resData
                let row1 = resData.rows[0].Product.detail
                let row2 = resData.rows[0].Sales_Order.detail
                let row3 = resData.rows[0].Shipment.detail
                let row4 = resData.rows[0].Billing.detail
                let row5 = resData.rows[0].Activation.detail
                let row6 = resData.rows[0].Usage.detail
                let row7 = resData.rows[0].Service.detail

                let tip1 = resData.rows[0].Product.tips
                let tip2 = resData.rows[0].Sales_Order.tips
                let tip3 = resData.rows[0].Shipment.tips
                let tip4 = resData.rows[0].Billing.tips
                let tip5 = resData.rows[0].Activation.tips
                let tip6 = resData.rows[0].Usage.tips
                let tip7 = resData.rows[0].Service.tips
                // 处理后数据和tooltip信息
                _this.stepsData.prod_family = resData.prod_family
                for(let i in row1){
                  if(i === 'Prod SN'){
                    _this.stepsData.snNumber = row1[i]
                  }
                }
                _this.stepsData.row1 = row1
                _this.stepsData.row2 = row2
                _this.stepsData.row3 = row3
                _this.stepsData.row4 = row4
                _this.stepsData.row5 = row5
                _this.stepsData.row6 = row6
                _this.stepsData.row7 = row7

                _this.stepsData.tip1 = tip1
                _this.stepsData.tip2 = tip2
                _this.stepsData.tip3 = tip3
                _this.stepsData.tip4 = tip4
                _this.stepsData.tip5 = tip5
                _this.stepsData.tip6 = tip6
                _this.stepsData.tip7 = tip7



                _this.infoLoading = false
              }
              _this.infoItem = resData.rows.map(function (item) {
                return item
              })
              _this.infoLoading = false
              this.searchHistory()
            }
          }).catch(error => {
            console.log('出错了')
            _this.infoLoading = false
          })

        } else {
          this.infoLoading = false
        }
      },
      isBottom2() {
        let customerInfo2 = document.getElementById('customer-info2')
        if (customerInfo2.scrollHeight - customerInfo2.scrollTop - 0.9 <= customerInfo2.clientHeight) {
          console.log("到达底部2")
          this.pageNum += 1
          console.log(this.pageNum)
          var _this = this
          this.axios.post('/search/customerArchives.do', {
            search_value: _this.search_value,
            pageNum: _this.pageNum,
            pageSize: 10,
            flag: 1
          }).then(function (response) {
            if (response.status === 200) {
              _this.showLogo = false
              _this.afterCheck = true
              var resData = response.data.data
              if (resData.rows.length != 0) {
                var addItem = resData.rows.map(function (item) {
                  return item
                })
                _this.infoItem = _this.infoItem.concat(addItem)
              } else {
                _this.open()
              }
            }
          }).catch(function (error) {
            console.log(error)
          })
        }
      }
    },
    mounted() {
//      console.log(this.searchHistoryA)
//      console.log(this.searchHistoryA.toString() === '')
      if (this.$route.query.num) {
        this.butValue = this.$route.query.num
      }
      if (this.language === 'en') {
        this.tipsValue = this.$t('search.Pleaseholdtwo')
      }
      if (this.language === 'zh') {
        this.tipsValue = this.$t('search.Pleaseholdtwo')
      }
      this.searchHistory()
    }
  }
</script>

<style lang="scss" scoped>
  $text-center: center;
  $cursor-point: pointer;
  .filter-but {
    /*background-color: #f00;*/
    display: inline-block;
    /*width: 50px;*/
    width: 130px;
    font-size: 15px;
    height: 30px;
    cursor: $cursor-point;
    /*margin-left: 15px;*/
    &:hover {
      color: #1e90ff;
      /*font-weight: bold;*/
    }
  }
  .ProductRetrieval {
    .customer-top {
      overflow: hidden; // 激活BFC解决Bug
      .advanced-filter-btn {
        position: absolute;
        right: 0;
        /*width: 200px;*/
        height: 50px;
        margin-top: 20px;
        margin-right: 20px;
      }
      .btn-after {
        margin-right: 46px;
        margin-top: 30px;
        height: 56px;
        z-index: 500;
      }
      .el-btn {
        height: 56px!important;
      }
      .customer-logo {
        margin-top: 45px;
        padding-bottom: 12px;
        text-align: $text-center;
      }
      .new-input {
        margin-top: 20px;
      }
      .customer-button {
        text-align: $text-center ;
        margin-top: 20px;
        /*margin-left: calc(100% - 65vw);*/
        .el-radio-button {
          margin-right: 10px;
          margin-left: 10px;
        }
        .filter-but {
          /*background-color: #f00;*/
          display: inline-block;
          /*width: 50px;*/
          width: 130px;
          font-size: 15px;
          height: 30px;
          cursor: $cursor-point;
          /*margin-left: 15px;*/
          &:hover {
            color: #1e90ff;
            /*font-weight: bold;*/
          }
        }
      }
      .customer-search {
        padding-top: 10px;
        /*text-align: center;*/
        .el-input {
          width: 750px;
        }
        .clear-icon {
          cursor: $cursor-point;
        }
        .clear-icon:hover {
          color: #409eff;
        }
      }
      .customer-history, .machine-history {
        padding-top: 5px;
        /*text-align: center;*/
        .sh-tag {
          display: inline-block;
          width: 120px;
          color: #afafaf;
        }
        .el-tag {
          margin: 0 20px 0 0;
          cursor: $cursor-point;
        }
        .clearAll {
          margin-left: 3vw;
          color: #409eff;
          cursor: $cursor-point;
          &:hover {
            font-weight: bold;
          }
        }
      }
    }
    .machine-list {
      padding: 0 46px 20px 46px;
    }
    .header-title {
      margin-left: 28px;
      margin-top: 52px;
      margin-bottom: 14px;
      span {
        color: #939cad;
        font: bold 15px Helvetica;
      }
    }
    .customer-info, .customer-info2 {
      margin-top: 10px;
      /*height: 55vh;*/
      height: calc(70vh - 65px);
      /*height: calc(63vh - 65px);*/
      overflow: auto;
      .tips {
        width: 100%;
        text-align: center;
        /*padding-top: 10vh;*/
        padding-top: 140px;
        font-size: 20px;
        font-weight: bold;
        color: #99a9bf;
      }
    }
    .load-div {
      position: absolute;
      left: 50%;
      top: 50%;
    }
  }
  // 搜索历史弹出框样式
  .popover-card {
    text-align: center;
  }
  .search-card {
    /*border: 1px solid #ccc;*/
    padding: 25px 20px;
    .search-history {
      .search-title {
        color: #939cad;
        font: 18px Helvetica, Regular;
        .clearAll:hover {
          /*color: #f33;*/
        }
      }
      .clear-history {
        float: right;
      }
      .history-tag {
        /*width: 580px;*/
        width: 100%;
        /*display: flex;*/
        margin-top: 15px;
        .tag-item {
          background-color: #e8f8fc;
          color: #3dc1df;
          font: 16px Helvetica, Regular;
          display: inline-block;
          width: calc(50% - 5px);
          height: 45px;
          border: 1px solid #ebf8fb;
          border-radius: 6px;
          margin-bottom: 10px;
          /*text-align: center;*/
          line-height: 45px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            max-width: 200px;
            vertical-align: bottom;
          }
          /*font-weight: bold;*/
        }
        .tag-item:nth-child(odd) {
          margin-right: 5px;
        }
        .tag-item:nth-child(even) {
          margin-left: 5px;
        }
      }
    }
  }
  /*新版样式*/
  .bottom-box{
    margin-top:20px;
    .detailsName{
      color:#000;
      font-size:20px;
      .title{
        font-family: 'Microsoft YaHei';
        font-weight: bold;
        margin-right:88px;
      }
      .subTitle{
        height:30px;
        background-color:#a2dbff;
      }
    }
    .progressBox{
      /*padding:25px 15px 30px 10px;*/
      padding:25px 15px 30px 90px;
      .progress{
        width:100%;
        cursor:pointer;
        display:inline-block;
        .tooltip{
          position:relative;
          left:-80px;
          right:30%;
          padding:10px;
          width:210px;
          height:118px;
          background: url('../images/tootipNormal.png') no-repeat;
          text-align: center;
          color:#999;
          .tooltip-name{
            color:#000;
            font: bold 18px 'Microsoft YaHei';
          }
          .tooltip-info{
            padding:16px 6px 14px;
            font-size:14px;
          }
        }
        .tooltip.active{
          color:#fff;
          background: url('../images/tootipActive.png') no-repeat;
          .tooltip-name{
            color:#fff;
          }
        }
        .step{
          margin-top:20px;
          span{
            display:inline-block;
          }
          .step-num{
            display:inline-block;
            width:40px;
            height:40px;
            text-align:center;
            padding-top:5px;
            /*line-height:40px;*/
            border-radius:50%;
            background:#edaeda;
            font: bold 20px 'MicrosoftYaHei';
            color:#fff;
          }
          .step-line{
            /*width:244px;*/
            width:calc(100% - 45px);
            height:8px;
            background:#0090e9;
          }
        }
      }
      .el-col-6:nth-child(4){
        .step-num{
          vertical-align: top;
        }
        .step-line{
          position: relative;
          top: 16px;
          /*left: -4px;*/
          left: 0;
          height:200px;
          border-right:8px solid #0090e9;
          border-top:8px solid #0090e9;
          border-bottom:8px solid #0090e9;
          background:#fff;
          border-top-right-radius:70%;
          border-bottom-right-radius:70%;
        }
      }
      .el-col-6:nth-child(5){
        position:absolute;
        top:215px;
        left:75%;
        .step-line{
          /*width:8px;*/
          width:12px;
        }
      }
      .el-col-6:nth-child(6){
        position:absolute;
        top:215px;
        left:50%;
      }
      .el-col-6:last-child{
        position:absolute;
        top:215px;
        left:25%;
      }
    }
    .progressCards{
      margin-top:20px;
      min-height:208px;
      border:1px solid #707070;
      border-radius: 6px;
      font-family:'Microsoft YaHei';
      font-weight:bold;
      .deviceDetails-list{
        padding:30px;
        .cardTitle {
          color: #000;
          font-size: 20px;
        }
        .noData{
          text-align:center;
          margin-top:4%;
          color: #666;
          font-size:14px;
        }
        .cardInfo {
          .el-col-12{
            margin-top:30px;
            color: #666;
            font-size:14px;
          }
        }
      }

    }
  }

</style>
